<template>
  <!-- 用户测评 -->
  <div>
    <el-form :model="form">
      <el-row style="margin-top: 20px">
        <el-card
          style="
            border-radius: 10px;
            background: -webkit-linear-gradient(bottom, #3600f921, #3600f974)
              no-repeat;
          "
        >
          <el-row
            style="
              display: flex;
              width: 100%;
              align-items: center;
              justify-content: space-between;
            "
          >
            <el-col :span="5">
              <div
                style="
                  color: #ffffff;
                  display: flex;
                  align-items: center;
                  justify-content: flex-start;
                "
              >
                <button
                  class="el-icon-arrow-left"
                  @click="goback"
                  style="
                    font-size: 40px;
                    padding: 0px;
                    font-weight: bold;
                    color: #ffffff;
                    background-color: Transparent;
                    border-width: 0px;
                  "
                ></button>
                <div style="font-size: 30px; font-weight: bold">方案变更</div>
              </div>
            </el-col>
            <el-col :span="19">
              <el-steps :active="0" finish-status="success" simple>
                <el-step title="Step 1:用户测评"></el-step>
                <el-step title="Step 2:预期收益率调整"></el-step>
                <el-step title="Step 3:确认基金序列"></el-step>
              </el-steps>
            </el-col>
          </el-row>
        </el-card>
      </el-row>
      <el-row type="flex" justify="space-around" style="text-align: left">
        <el-col :span="7" style="margin-top: 20px">
          <el-card style="margin-top: 20px; height: 250px">
            <div>
              <p>了解你可以用于投资的钱能帮助我们更好的判断你的风险承受能力</p>
              <h1>你当前达到了哪种财富自由</h1>
              <el-form-item required>
                <el-select
                  v-model="form.user_annual_income"
                  placeholder="请选择年收入（万元）"
                  style="width: 80%"
                >
                  <el-option label="0-1万   炸鸡自由享" value="1"></el-option>
                  <el-option label="1-10万  火锅周周涮" value="10"></el-option>
                  <el-option label="10-30万 刺身随便点" value="30"></el-option>
                  <el-option label="30万以上 法餐不心疼" value="99"></el-option>
                </el-select>
              </el-form-item>
            </div>
          </el-card>
        </el-col>
        <el-col :span="7" style="margin-top: 20px">
          <el-card style="margin-top: 20px; height: 250px">
            <div>
              <p>投资需要做时间的朋友坚持投资能有效提升盈利概率</p>
              <h1>你愿意的投资年限是</h1>
              <el-form-item>
                <el-select
                  v-model="form.user_expected_time"
                  placeholder="请选择投资年限"
                  style="width: 80%"
                >
                  <el-option label="0-1年" value="1"></el-option>
                  <el-option label="1-2年" value="2"></el-option>
                  <el-option label="2-3年" value="3"></el-option>
                  <el-option label="3-4年" value="4"></el-option>
                </el-select>
              </el-form-item>
            </div>
          </el-card>
        </el-col>
        <el-col :span="7" style="margin-top: 20px">
          <el-card style="margin-top: 20px; height: 250px">
            <div>
              <p>
                “智能投”只在为你提供资产长期增值的服务收益和风险相伴，并不是多多益善哦
              </p>
              <h1>你对长期收益的预期是</h1>
              <el-form-item required>
                <el-select
                  v-model="form.user_expected_return"
                  placeholder="请选择预期收益率"
                  style="width: 90%"
                >
                  <el-option
                    label="0.3%  银行活期水平"
                    value="0.003"
                  ></el-option>
                  <el-option label="2.5%  余额宝水平" value="0.025"></el-option>
                  <el-option
                    label="6%    偏债基基金近十年平均水平"
                    value="0.06"
                  ></el-option>
                  <el-option
                    label="10%   偏股基基金近十年平均水平"
                    value="0.10"
                  ></el-option>
                  <el-option
                    label="20%   巴菲特历年平均水平"
                    value="0.20"
                  ></el-option>
                </el-select>
              </el-form-item>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <el-row
        style="margin-top: 20px; padding-left: 24px"
        type="flex"
        justify="space-between"
      >
        <el-col :span="10">
          <el-card style="text-align: left">
            <div slot="header" class="clearfix">
              <span>你倾向于投资哪些领域</span>
            </div>
            <el-form-item required>
              <el-row type="flex" justify="space-between">
                <el-checkbox-group v-model="form.fund_field">
                  <el-col :span="6" v-for="item in fund_field" :key="item.pk">
                    <el-checkbox :label="item.pk" name="fund_field">{{
                      item.fund_field_name
                    }}</el-checkbox>
                  </el-col>
                </el-checkbox-group>
              </el-row>
            </el-form-item>
          </el-card>
        </el-col>
        <el-col
          :span="10"
          style="
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
          "
        >
          <BackButton></BackButton>
          <el-button
            style="
              border-radius: 10px;
              color: #ffffff;
              background-color: #39c5bb70;
              border-width: 3px;
              border-color: #39c5bb;
              margin: 10px 0px;
              padding: 0px;
              width: 50%;
            "
            @click="nextpage"
          >
            <div
              style="
                display: flex;
                align-items: center;
                justify-content: center;
              "
            >
              <span style="font-size: 30px; font-weight: bold">下一步</span>
              <i
                class="el-icon-right"
                style="font-size: 50px; padding-left: 10px; font-weight: bold"
              ></i>
            </div>
          </el-button>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { getAllFundFieldsAPI } from "@/api/getAllFundFieldsAPI";
import { receiveFormAPI } from "@/api/receiveFormAPI";
import BackButton from "@/components/BackButton.vue";

export default {
  data() {
    return {
      // 表单
      form: {
        user_id: this.$route.query.user_id,
        user_annual_income: "",
        user_expected_time: "",
        user_expected_return: "",
        fund_field: [],
      },
      // 基金领域对象列表
      fund_field: [],
    };
  },
  methods: {
    // 跳转到收益率调整页面
    nextpage() {
      this.$confirm(
        "点击确定将进入调整风险投资比例，是否继续？",
        "下一步"
      ).then(async() => {
          if(this.form.user_annual_income === "" || this.form.user_expected_time === "" || this.form.user_expected_return === "" || this.form.fund_field.length === 0){
            this.$message({
              type:'error',
              message:"您有信息没填写,请稍后重试!"
            })
          }else{
            // 发送post请求发送表单
            const {data:res} = await receiveFormAPI(this.$qs.stringify({user_form:JSON.stringify(this.form)}))
            if(res.flag){
                this.$message.info('保存成功！')
                this.$router.push({
                path: "rateadjustment",
                query: {
                  user_id: this.$route.query.user_id,
                },
              });
            }  
          }
        }
      ).catch(()=>{
        this.$message.info('操作取消')
      });
    },
    // 返回上一页
    goback() {
      this.$router.back();
    },
    // 获取基金领域列表
    async getAllFundFields() {
      console.log("发送getAllFundFields请求");
      const { data: res } = await getAllFundFieldsAPI();
      if (res.flag) {
        this.$message.success('获取基金领域列表成功！')
        var list = this.$jsonToObj(res);
        this.fund_field = list;
      }
    },
  },
  created() {
    // 发axios请求最早的时候，调用普通函数来发请求
    this.getAllFundFields();
  },
  components: {
    BackButton,
  },
};
</script>

<style></style>
